大家好,我是大志。
随着AI Agent技术的不断发展,在众多AI 编程工具中,Claude Code脱颖而出,成为最受开发者欢迎的AI编程利器之一,并且Claude Code还支持使用各种常用的大语言模型,比如GPT-5.4、qwen3.6-plus、glm-5、MiniMax-M2.7、deepseek-v3.2等模型。
目前,Vibe Coding已经成为程序员开发的主流方案,那么掌握AI编程工具的使用方法,也成为了必须要掌握的一项关键技能。
今天我将通过实战手把手带教你如何高效的使用Claude Code,关于如何安装和配置Claude Code传送门:。
二、基本用法
2.1 项目开发
下面,我们将通过开发一个2048游戏来演示Claude Code基本用法。
首先,创建并进入项目文件夹
mkdir 2048-game
cd 2048-game执行claude命令启动Claude Code
claude会提示我们是否信任当前文件夹,我们选择是。

进入claude后,会显示我们当前所使用的API是MiniMax-2.7。

直接输入提示词:帮我开发一个经典2048游戏,要求页面美观,并且使用中文,确保游戏能正常运行没有报错。

在开发过程中,Claude Code询问我们是否允许创建SPEC.md需求文档,这里我们选择第二项,在当前会话内不会再次询问(后面再会话内创建和修改文件,都不会询问)

接下来,Claude Code询问是否允许执行如下命令,这里选择第二项,这里没有在当前会话不在提醒,自动执行的选项,因为执行bash命令是一个高危操作,必须由用户亲自确认,
在后续执行过程中,有多次询问是否执行命令,都选择第二项。

等待几分钟,Claude Code已经将2048游戏开发好了。

输入!进入bash模式,输入open index.html,就会在浏览器中自动打开该页面。

游戏效果如下,感觉还是很不错的,CC只有了2分钟就完成了,至少可以节省我们大半天时间。

2.2 代码回滚
现在我们的2048游戏的背景是深色背景,现在,我们想加一个可以切换主题色的功能,直接告诉Claude Code:新增功能,支持切换背景主题色:包含深色和浅色,修改完后确保项目正常运行。

Claude Code显示开发完成:

再次测试一下效果,可以通过点击左上角按钮,来切换深色浅色主题。


假设,我们现在开发完成后,不想要这个主题色切换功能了,就需要对代码进行回滚。我们可以使用/rewind命令进行回滚,或者直接点击两次ESC选择回滚点。我们选择添加主题色功能之前的回滚点。

选择回滚会话和代码

重新查看效果,发现切换主题色的按钮已经消失了,说明代码和会话回滚成功。

三、CLAUDE.md
你是否遇到过如下场景:在开发一个Vue+TypeScript的前端项目时,每次用 Claude Code 写一个新组件,都要在对话中都要交代一大堆要求:
“请用组合式 API,
<script setup>语法,Props 类型用defineProps<T>(),样式统一用CSS Modules,文件名用大驼峰……”
这一段话每天可能要复制很多次,并且换一台电脑或者团队中不同小伙伴都要去复制这些开发规范告诉Claude Code。
在Claude Code中提供了,一个CLAUDE.md文件,可以把想让Claude Code了解的内容预先放进去,那么我们就不用每次输入提示词了,下面我们来一起学习如何使用CLAUDE.md文件。
首先,我们创建一个新的项目目录。
ai mkdir vue-demo
ai cd vue-demo让Claude Code帮我们创建一个基础的Vue3 + TypeScript项目。

选择使用Vite构建

项目生成好之后,我们使用/init命令可以生成CLAUDE.md文件,这个CLAUDE.md其实就是这个项目的说明书。

使用ls命令查看,发现在当前目录里生成了CLAUDE.md文件。

这里生成的CLAUDE.md是英文的。

我们先将CLAUDE.md内容转成中文

转成中文后,在最后加上项目编码规范。

接下来,我们让CC生成一个登录页面

执行完成

我们看一下效果:

打开生成的登录页面组件LoginPage.vue,可以看到作者是wzy,说明我们的配置生效了。

四、MCP
我们知道Claude Code是一个AI Agent,Agent之所以“无所不知”,是因为调用大语言模型,而大语言模型是无法获取到实时信息的,我们可以利用搜索引擎来搜索想要获取的实时信息。
下面,我们使用Brave浏览器提供的mcp服务来对实时信息进行获取,可以到https://brave.com/zh/search/api/,进行注册,每个月有5$的免费额度。
